<script setup>

import {ref, onMounted,computed} from 'vue'
import {useRoute, useRouter} from "vue-router";
import {reqHospitalWork, reqHospitalDoctor} from "@/api/hospital/index.js";
import moment from 'moment';


//获取路由对象
const $route = useRoute()
// 获取路由器对象
const $router = useRouter()
// 分页数据
const pageNo = ref(1)
const limit = ref(6)
// 存储科室挂号数据
const workData = ref({})
// 存储排班日期:当前数据的第一个
const workTime = ref({})
// 存储医生列表数据
const doctorArr = ref([])

// 挂载之后发送请求，跟新时间
onMounted(() => {
  fetchWorkData()
  times.value = setInterval(() => {
      Time.value = moment().format('YYYY年MM月DD日 hh:mm:ss');
    }, 1000)
})
// 获取挂号数据
const fetchWorkData = async () => {
  const result = await reqHospitalWork(
      pageNo.value,
      limit.value,
      $route.query.hoscode,
      $route.query.depcode
  )
  if (result.code === 200) {
    workData.value = result.data
    // 获取第一个日期数据
    workTime.value = workData.value.bookingScheduleList[0]
    // 获取医生排班列表数据
    await getDoctorWorkData();
  }
}

// 获取医生排班列表数据
const getDoctorWorkData = async () => {
  // 参数：医院编号，科室编号，日期
  const hoscode = $route.query.hoscode
  const depcode = $route.query.depcode
  const workDate = workTime.value.workDate
  const result = await reqHospitalDoctor(hoscode, depcode, workDate)
  if (result.code === 200) {
    doctorArr.value = result.data
  }
}

//计算出上午排班的医生数据
let moringArr = computed(() => {
  return doctorArr.value.filter((doc) => {
    return doc.workTime == 0;
  });
});
//计算出下午排班的医生的数据
let afterArr = computed(() => {
  return doctorArr.value.filter((doc) => {
    return doc.workTime == 1;
  });
});

// 选择日期
const changeTime = (item) => {
  // 改变日期获取日期与医生信息
  workTime.value = item
  getDoctorWorkData()
}

// 获取时间
const nowTime = new Date().getFullYear() + '年' + (new Date().getMonth() + 1) + '月' + new Date().getDate() + '日'
// 获取当前时间动态的时分秒
const times =ref(0)
const Time = ref(moment().format('YYYY年MM月DD日 hh:mm:ss'));

// 跳转到预约页面
const goStep2 = () => {
  $router.push({
    path: '/hospital/register-2',
    query: {
      hoscode: $route.query.hoscode,
    }
  })
}



</script>

<template>
  <div class="container">

    <!-- 顶部科室信息 -->
    <div class="top-title">
      <div class="row">
        <h3>医院名称：{{ workData.baseMap?.hosname }}</h3>
        <div class="line"></div>
        <h3>预约科室：{{ workData.baseMap?.bigname }}</h3>
      </div>
      <div class="row-1">
        <h4>小科室：{{ workData.baseMap?.depname }}</h4>
      </div>
    </div>

    <!-- 中间日期组件选择-->
    <div class="center-select">
      <h1>{{ workData.baseMap?.workDateString }}</h1>
      <div class="select-date">
        <div class="item"
             :class="{
             active: item.status === -1 || item.availableNumber === -1,
             cur: item.workDate === workTime.workDate
             }"
             v-for="item in workData.bookingScheduleList"
             :key="item"
             @click="changeTime(item)"
        >
          <div class="date1">{{ item.workDate }}--{{ item.dayOfWeek }}</div>
          <div class="date2">
            <div v-if="item.status === -1">停止挂号</div>
            <div v-if="item.status === 0">
              {{
                item.availableNumber === -1 ? "无号" : `有号(${item.availableNumber})`
              }}
            </div>
            <div v-if="item.status === 1">即将放号</div>
          </div>
        </div>
      </div>

      <!-- 分页组件 -->
      <el-pagination
          style="margin: 20px;display: flex;justify-content: center;"
          v-model:current-page="pageNo"
          layout="prev, pager, next"
          @current-change="fetchWorkData"
          :total="workData.total"/>
    </div>

    <!-- 底部医生列表 -->
    <div class="span" v-if="workTime.status === 1">
      <span class="time">{{nowTime}}14:30</span>
      <span class="willText">放号，当前时间{{ Time }}</span>
    </div>

    <div class="bottom-doctor" v-else>
      <!-- 上午号源 -->
      <div class="morning">
        <div class="tips">
          <img src="/src/assets/morning.png" alt="">
          <h3>上午号源</h3>
        </div>
        <div class="doctor">
          <div class="doc-left">
            <div class="info">
              <span>职称：主任医师</span>
              <span>|</span>
              <span>姓名：黎深</span>
            </div>
            <div class="skill">擅长：心脏病、外科手术、呼吸系统疾病</div>
          </div>
          <div class="doc-right">
            <span class="price">￥100</span>
            <el-button type="primary" @click="goStep2()">预约</el-button>
          </div>
        </div>
      </div>
      <!-- 下午号源 -->
      <div class="afternoon">
        <div class="tips">
          <img src="/src/assets/afternoon.png" alt="">
          <h3>下午号源</h3>
        </div>
        <div class="doctor">
          <div class="doc-left">
            <div class="info">
              <span>职称：主任医师</span>
              <span>|</span>
              <span>姓名：沈悠</span>
            </div>
            <div class="skill">擅长：心理健康、精神病、神经病、肿瘤病</div>
          </div>
          <div class="doc-right">
            <span class="price">￥80</span>
            <el-button type="primary" @click="goStep2()">预约</el-button>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  display: flex;
  flex-direction: column;

  .top-title {
    display: flex;
    flex-direction: column;

    .row {
      display: flex;
      align-items: center;
      height: 50px;
      //border: 1px solid #e7a4a4;
      h3 {
        margin: 0 20px;
        font-size: 22px;
        font-weight: bold;
        color: #7f7f7f;
      }

      .line {
        margin: 15px;
        width: 5px;
        height: 50%;
        background-color: #7f7f7f;
      }
    }

    .row-1 {
      display: flex;
      height: 40px;
      align-items: center;

      h4 {
        margin: 0 20px;
        font-size: 20px;
        font-weight: bold;
        color: #f89258;
      }
    }
  }
}

.center-select {
  h1 {
    height: 50px;
    width: 100%;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    font-weight: bold;
    margin: 10px;
    color: #333;
  }

  .select-date {
    width: 100%;
    display: flex;
    margin: 30px 0px;

    .item {
      border: 1px solid skyblue;
      border-radius: 8px;
      margin: 0px 5px;
      transition: all 0.3s;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;

      &.active {
        border: 1px solid #ccc;
        color: #7f7f7f;

        .date1 {
          background: #e8e8e8;
        }
      }

      &.cur {
        transform: scale(1.1);
        box-shadow: 0px 0px 8px #2ec7fa;
      }

      .date1 {
        background: #e8f2ff;
        color: #7f7f7f;
        height: 35px;
        width: 100%;
        text-align: center;
        line-height: 35px;
      }

      .date2 {
        width: 100%;
        height: 60px;
        text-align: center;
        line-height: 60px;
      }
    }
  }
}

.bottom-doctor {
  display: flex;
  flex-direction: column;

  .morning, .afternoon {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 0 8px #969696;
    margin: 15px 0;

    .tips {
      display: flex;
      align-items: center;
      height: 50px;
      width: 100%;
      border-radius: 8px;

      img {
        width: 30px;
        height: 30px;
        margin: 10px;
      }

      h3 {
        margin: 10px;
        font-size: 22px;
        font-weight: bold;
        color: #7f7f7f;
      }
    }

    .doctor {
      display: flex;
      justify-content: space-between;
      font-size: 18px;
      font-weight: bold;

      .doc-left {
        display: flex;
        flex-direction: column;

        .info {
          display: flex;
          color: #24bfee;
          margin: 10px;
          border-bottom: 1px solid #ccc;

          span {
            margin: 10px;
          }
        }

        .skill {
          font-size: 18px;
          font-weight: bold;
          color: #7f7f7f;
          margin: 10px 20px 20px 20px;
        }
      }

      .doc-right {
        display: flex;
        align-items: center;
        font-size: 24px;
        font-weight: bold;
        color: #24bfee;
        margin: 0 20px;

        .price, .el-button {
          margin: 0 10px;
        }
      }
    }
  }
}


.span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 24px;
  font-weight: bold;
  color: #24bfee;
  background-color: #ffffff;
  box-shadow: 0 0 8px #969696;
  border-radius: 8px;
  margin: 20px 0;

  .time {
    margin: 20px 5px;
  }

  .willText {
    margin: 20px 5px;
    color: #f89258;
  }
}


</style>